<template>
    <view>
        <!-- 附件 -->
        <view class="uploadFile">
            <view class="title mybaseLabel mybaseTitle" :style="{ fontSize: oaconfig.Size14 }">附件
                <text class="asterics" v-show="required">*</text>
            </view>
            <view class="minVideoViewBox">
                <view class="miniStreamView" v-for="(item, index) in fileList" :key="index">
                    <image style="width: 90upx; height: 90upx;" v-if="item.dir && item.fileName.indexOf('.pdf')==-1
                    &&item.fileName.indexOf('.doc')==-1
                    &&item.fileName.indexOf('.docx')==-1
                    &&item.fileName.indexOf('.ppt')==-1
                    &&item.fileName.indexOf('.rar')==-1
                    &&item.fileName.indexOf('.xlsx')==-1
                    &&item.fileName.indexOf('.zip')==-1" :src="item.dir" @tap="preview(item.dir, index)"></image>
                    <image style="width: 90upx; height: 90upx;" v-if="item.fileName.indexOf('.pdf')>-1
                    ||item.fileName.indexOf('.doc')>-1
                    ||item.fileName.indexOf('.docx')>-1
                    ||item.fileName.indexOf('.ppt')>-1
                    ||item.fileName.indexOf('.rar')>-1
                    ||item.fileName.indexOf('.xlsx')>-1
                    ||item.fileName.indexOf('.zip')>-1
                    " :src="
                    item.fileName.indexOf('.pdf')>-1? '../../../static/oa/wenjian/pdf.png':''
                    ||item.fileName.indexOf('.doc')>-1?'../../../static/oa/wenjian/doc.png':''
                    ||item.fileName.indexOf('.docx')>-1?'../../../static/oa/wenjian/docx.png':''
                    ||item.fileName.indexOf('.ppt')>-1?'../../../static/oa/wenjian/ppt.png':''
                    ||item.fileName.indexOf('.rar')>-1?'../../../static/oa/wenjian/rar.png':''
                    ||item.fileName.indexOf('.xlsx')>-1?'../../../static/oa/wenjian/xlsx.png':''
                    ||item.fileName.indexOf('.zip')>-1?'../../../static/oa/wenjian/zip.png':''
                    " @tap="previewFil(item.dir, index,item.fileName)"></image>
                    <view class="Delete" v-if="item.id" @tap="!disabled ? delImg(item.id, 1) : ''"><text
                            class="iconfont icon-guanbi Iconxs"></text></view>
                </view>
                <image @tap="!disabled ? uploadFileTap('bottom', 1) : ''"
                    style="width: 90upx; height: 90upx; margin:0 30upx 0 10upx;" class="uploadBtn"
                    src="../../static/oa/add_icon2.png"></image>
            </view>
        </view>
        <!-- 上传弹窗 -->
        <uni-popup ref="popup" type="bottom" style="z-index: 9999;">
            <view class="screen">
                <view class="screenBox">
                    <view class="screenItem">
                       <!-- <view class="screenTitle" :style="{ fontSize: oaconfig.Size14 }">如果您需要上传PDF,DOC等格式 请前往PC端操作
                        </view> -->
                        <view :style="{ fontSize: oaconfig.Size16 }" @tap="chooseImage(0)">拍照上传</view>
                        <view :style="{ fontSize: oaconfig.Size16 }" @tap="chooseImage(1)">选择图片</view>
                        <view :style="{ fontSize: oaconfig.Size16 }" @tap="chooseImage(3)">选择文件</view>
                    </view>
                </view>
                <view class="screencancelBox"><button class="cancelBtn" @tap="uploadFileClose"
                        :style="{ fontSize: oaconfig.Size18,color:oaconfig.backgroundColor }">取消</button></view>
            </view>
        </uni-popup>
    </view>
</template>

<script>
    export default {
        name: 'upload',
        props: [ 'value', 'required', 'fileType', 'disabled'],
        data() {
            return {
                oaconfig: {},
                actionUrl: '',
                fileNo: '',
                fileList: [],
                showViewer: '',
                fileArr: {
                    pdf: '../../../static/oa/wenjian/pdf.png',
                    doc: '../../../static/oa/wenjian/doc.png',
                    docx: '../../../static/oa/wenjian/docx.png',
                    ppt: '../../../static/oa/wenjian/ppt.png',
                    rar: '../../../static/oa/wenjian/rar.png',
                    xlsx: '../../../static/oa/wenjian/xlsx.png',
                    zip: '../../../static/oa/wenjian/zip.png'
                },
                uploadFileformData: {
                    token: this.$api.getToken(),
                    pageIndex: 1,
                    pageSize: 10000,
                    billNo: '',
                    seq: 1,
                    sortfieid: 'SEQ',
                    sort: 'seq'
                }
            };
        },
        created() {
            this.oaconfig = this.$oaconfig;
            this.fileNo = this.value;
            if (this.fileNo) {
                if (this.value) {
                    this.fileQuery();
                }
            } else {
                this.fileNo = this.$oacommon.RandomNumBoth(this.fileType); //新增生成临时单号
            }
        },
        methods: {
            fileQuery() {
                let _this = this;
                let queData = {
                    billNo: this.fileNo,
                    pageIndex: '1',
                    pageSize: '1000',
                    seq: '1',
                    sortfield: 'SEQ',
                    sort: 'asc'
                };
                //查询附件列表
                _this.$lyRequest.get('/gateway/basedata/mp/dbsap/base/commonFile/queryList.do', queData).then(result => {
                    if (result.data && result.data.result == '1') {
                        let rowsData = [];
                        for (let i = 0; i < result.data.rows.length; i++) {
                            result.data.rows[i].url = result.data.rows[i].dir;
                            result.data.rows[i].name = result.data.rows[i].fileName;
                            rowsData.push(result.data.rows[i]);
                        }
                        _this.fileList = rowsData;
                    } else {
                        // 调用接口失败情况
                        _this.$api.showTip(result.data.msg);
                    }
                });
            },

            // 上传附件事件
            uploadFileTap(type) {
                this.type = type;
                this.$refs.popup.open();
            },
            // 关闭弹窗
            uploadFileClose() {
                this.$refs.popup.close();
            },
            //相机/相册/扫码
            chooseImage: function(index) {
                let _this = this;
                //index：0 相机  1相册 2扫码
                if (index == 0) {
                    uni.chooseImage({
                        count: 1, //默认9
                        sizeType: ['original', 'compressed'],
                        sourceType: ['camera'], //拍照
                        success: function(res) {
                            //压缩上传
                            _this.$oacommon.compressFile(res.tempFiles[0], resfile => {
                                _this.uploadFile(resfile);
                            });
                        }
                    });
                } else if (index == 1) {
                    uni.chooseImage({
                        count: 1, //默认9
                        sizeType: ['original', 'compressed'],
                        sourceType: ['album'], //相册选择
                        success: function(res) {
                            //压缩上传
                            _this.$oacommon.compressFile(res.tempFiles[0], resfile => {
                                _this.uploadFile(resfile);
                            });
                        }
                    });
                } else if (index == 2) {
                    // 只允许通过相机扫码
                    uni.scanCode({
                        onlyFromCamera: true,
                        success: function(res) {}
                    });
                } else if (index == 3) {
                    // 上传文件支持zip,doc,pdf,xlsx格式
                    uni.chooseFile({
                        count: 20, //默认100
                        extension: ['.zip', '.xlsx', '.docx', '.pdf', '.rar', '.doc', '.ppt'],

                        success: function(res) {
                            let resfileArr = res.tempFiles[0]
                            _this.uploadFile(resfileArr);

                        }

                    });
                }
                _this.uploadFileClose(); //关闭弹窗
            },
            //附件上传
            uploadFile(File) {
                uni.showLoading({
                    mask:true,
                    title:'正在上传'
                })
                let _this = this;
                let formData = {
                    billNo: this.fileNo,
                    fileType: this.fileType,
                    ifUpload: true,
                    remarks: ""
                };
				let url = '/gateway/basedata/mp/dbsap/base/commonFile/upload.do'
                uni.uploadFile({
                    url: url, //仅为示例，非真实的接口地址
					header: {
						Authorization: _this.$api.getToken()
					},
                    file: File,
                    name: 'uploadfile',
                    formData: formData,
                    success: uploadFileRes => {
                        const uploadData = JSON.parse(uploadFileRes.data);
                        if (uploadData && uploadData.result == '1') {
							_this.$api.showTip('上传成功')
                            _this.fileList.push(uploadData.rows.rows);
							_this.$emit("input", _this.fileNo);
                            uni.hideLoading();
                        } else {
                            _this.$api.showTip(uploadData.msg);
                        }
                    },
                    fail: err => {
                        uni.hideLoading();
                        _this.$api.showTip('上传失败！');
                    }
                });
            },

            //删除发票及附件图片
            delImg(item, index) {
                let _this = this;
                const id = {
                    id: item
                };
                _this.$lyRequest.requestConfig.header = {
                    Accept: 'application/json, text/javascript, */*; q=0.01',
                    'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;'
                };
                _this.$lyRequest.get('/gateway/basedata/mp/dbsap/base/commonFile/deleteFile.do', id).then(result => {
                    if (result.data && result.data.result == 1) {
                        _this.fileList.forEach((v, index) => {
                            if (v.id == item) {
                                _this.fileList.splice(index, 1);
                            }
                            return;
                        });
                    } else {
                        _this.$api.showTip(result.data.msg);
                    }
                });
                _this.$lyRequest.requestConfig.header = {
                    Accept: 'application/json, text/javascript, */*; q=0.01'
                };
            },
            //图片放大预览
            preview(url, index) {
                uni.previewImage({
                    urls: [url], //拿vuex中的头像地址
                    longPressActions: {
                        itemList: ['保存图片'],
                        success: function(data) {},
                        fail: function(err) {}
                    }
                });
            },
            previewFil(url, index,name) {
                let newUrl = url
                let slotName = name
                uni.navigateTo({
                    url:'../index/myPDFview?url='+ newUrl+'&name='+name
                })
            }
        }
    };
</script>

<style lang="scss" scoped>
    //@import url("../../../commons/oa/customized.scss");

    .asterics {
        color: crimson;
    }

    /* 上传相关 */
    .uploadFile {
        padding: 20upx 16upx;

        .title {
            height: 76upx;
            display: flex;
            align-items: center;
            margin-top: -4upx;
            padding-left: 10upx;
            // background-color: #f5f5f5;
        }

        .uploadImgBox {
            height: 150upx;
            // margin: 0 10upx;
            background-color: #fff;
            border-radius: 4upx;
            display: flex;
            align-items: center;

            .ImgItem {
                position: relative;
                display: flex;
                text-align: center;

                .image {
                    width: 90upx;
                    height: 90upx;
                    margin-left: 40upx;
                }

                .Delete {
                    width: 30upx;
                    height: 30upx;
                    position: absolute;
                    top: -16upx;
                    right: -16upx;
                    background-color: red;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    .Iconx {
                        font-size: 30upx;
                        color: #fff;
                    }
                }
            }

            .uploadBtn {
                width: 90upx;
                height: 90upx;
                margin-left: 40upx;
            }
        }
    }

    .screen {
        margin: 10upx 10upx;

        .screenBox {
            margin: 0;

            .screenItem {
                display: flex;
                justify-content: center;
                flex-direction: column;
                align-items: center;
                background-color: #ffffff;
                border-radius: 30upx;

                .screenTitle {
                    color: #919191;
                    font-size: 24upx;
                    text-align: center;
                    line-height: 110upx;
                }

                view {
                    height: 110upx;
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border-bottom: 2upx solid #f5f5f5;
                    color: #555;
                }

                view:first-child {
                    border-radius: 30upx 30upx 0upx 0upx;
                }

                view:last-child {
                    border-bottom: 2upx solid #fff;
                    border-radius: 0upx 0upx 30upx 30upx;
                }
            }
        }

        .screencancelBox {
            display: flex;
            flex-direction: row;
            // padding: 5upx 0 0 0;
            margin-top: 10upx;
            height: 110upx;

            .cancelBtn {
                height: 110upx;
                line-height: 110upx;
                background-color: #fff;
                color: #007aff;
                flex: 1;
                // border-bottom: 2upx solid #f5f5f5;
                border-radius: 30upx;
                font-size: 32upx;
            }

            .cancelBtn::after {
                border-radius: 30upx;
            }
        }
    }

    .minVideoViewBox {
        padding-top: 15upx;
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;

        &::-webkit-scrollbar {
            // 滚动条整体
            background: none;
        }

        &::-webkit-scrollbar-thumb {
            //滑块
            background: rgba(71, 145, 242, .5);
            border-radius: 5px;
        }

        &::-webkit-scrollbar-track {
            //轨道

        }

        &::-webkit-scrollbar-button {
            //两端按钮

        }

        &::-webkit-scrollbar-track-piece {
            //滚动条中间部分
        }

        .Delete {
            width: 30upx;
            height: 30upx;
            position: absolute;
            top: -16upx;
            right: -16upx;
            background-color: red;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;

            .Iconxs {
                font-size: 30upx;
                color: #fff;
            }
        }
    }

    .miniStreamView {
        width: 90upx;
        height: 90upx;
        display: inline-block;
        background: #fff;
        margin: 6px;
        position: relative;
        margin-left: 20upx;
    }
</style>
